<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                height: 100vh;
            }
            .bg {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: url("bg.jpg");
                background-size: cover;
                z-index: -10;
            }
            h1 {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-42%, -50%);
                font-family: 'fangsong';
                font-size: 6em;
                color: rgba(255, 255, 255, 0.5);
                text-shadow: 0 0 10px rgb(255, 255, 255);
            }
        </style>
    </head>
    <body>
        <h1>北极光之夜</h1>
        <div class="bg"></div>
        <canvas id="canvas"></canvas>

        <script>
            // 获取画布
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            /* 定义x为窗口宽度，y为窗口高度 */
            var x = 0,
                y = 0;
            /* 定义数组，是为了存储每一片雪与雪花的信息 */
            var arr = [];
            /* 假设有600片雪 */
            var num = 600;

            /* 绑定窗口大小发生改变事件，让canvas随时铺满浏览器可视区 */
            window.onresize = resizeCanvas;
            function resizeCanvas() {
                x = canvas.width = window.innerWidth;
                y = canvas.height = window.innerHeight;
            }
            resizeCanvas();

            // 初始化数组，给每片雪花定义随机位置坐标（x，y）与半径（r）与一个颜色（color）
            for (let i = 0; i < num; i++) {
                arr.push({
                    x: x * Math.random(),
                    y: y * Math.random(),
                    r: Math.random() * 5,
                    color: `rgba(255,255,255,${Math.random()})`,
                });
            }
            /* 创建image元素 */
            var img = new Image();
            /* 设置雪花的地址，只有雪花是用图片表示 */
            img.src = 'snow.png';
            function draw() {
                /* 遍历数组 */
                for (let i = 0; i < num; i++) {
                    var yuan = arr[i];
                    /* 创建路径 */
                    ctx.beginPath();
                    /* 给雪设置颜色 */
                    ctx.fillStyle = yuan.color;
                    /* 绘制雪 */
                    ctx.arc(yuan.x, yuan.y, yuan.r, 0, 2 * 3.14, false);
                    /* 如果i%30==0才绘制雪花，雪花不用太多 */
                    if (i % 30 == 0) {
                        /* 绘制雪花图片 */
                        ctx.drawImage(img, yuan.x, yuan.y, yuan.r * 10, yuan.r * 10);
                    }
                    /* 填充路径 */
                    ctx.fill();
                }
            }

            // 更新雪的位置
            function updated() {
                for (let i = 0; i < num; i++) {
                    var yuan = arr[i];
                    /* x轴位置+0.1，变化小点 */
                    yuan.x = yuan.x + 0.1;
                    /* y轴位置+自身半径一半，这样越大的学走越快 */
                    yuan.y = yuan.y + yuan.r / 2;
                    /* 如果学已经走出窗口 */
                    if (yuan.y > y) {
                        /* 重新给雪数组赋值 */
                        arr[i] = { x: x * Math.random(), y: -10, r: Math.random() * 5, color: `rgba(255,255,255,${Math.random()})` };
                    }
                }
            }
            setInterval(function () {
                /* 清屏 */
                ctx.clearRect(0, 0, x, y);
                /* 绘制 */
                draw();
                /* 更新 */
                updated();
            }, 10);
        </script>
    </body>
</html>
